<template>
  <!-- html -->
  <div class="rank">
   <zeroHeader :zerotitle="zerotitle"></zeroHeader>
    <div class="wrapper" ref="wrapper" :style="{'bottom':$store.state.curindex!=-1?'40px':''}">
       <mt-spinner :type="2" color="#d43c33" v-if="showspinner"></mt-spinner>
      <div class="content">
        <!-- loading组件 -->
        <zeroLoading v-if="allrank.length==0"></zeroLoading>
        <!-- 有歌曲的榜单 -->
        <div class="alllist" v-else>
        <div class="goodlist" >
          <div class="title">推荐榜单</div>
          <div
            class="good_item"
            v-for="(item,index) in goodrank"
            :key="index"
            @click="gorankinfo(index)"
          >
            <div class="good_item_pic">
              <img v-lazy="item.coverImgUrl+'?param=200y200'" alt />
              <div class="good_item_update">{{item.updateFrequency}}</div>
            </div>
            <div class="good_item_rank">
              <div
                class="good_item_song"
                v-for="(one,index) in item.tracks"
                :key="index"
              >{{index+1}}. {{one.first}} - {{one.second}}</div>
            </div>
          </div>
        </div>
        <!-- 没有歌曲的榜单 -->
        <div class="title">更多榜单</div>
        <div class="normallist">
          <div
            class="item"
            v-for="(item,index) in normalrank"
            :key="index"
            @click="gorankinfo(index)"
          >
            <div class="item_pic">
              <img v-lazy="item.coverImgUrl+'?param=200y200'" alt />
              <div class="item_update">{{item.updateFrequency}}</div>
            </div>
            <div class="item_name">{{item.name}}</div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import BScroll from "better-scroll";
import zeroLoading from "@/components/ZeroLoading.vue";
import zeroHeader from "@/components/ZeroHeader.vue";

export default {
  name: "rank",
  data() {
    return {
      zerotitle:'排行榜',
      allrank: [],
      goodrank: [],
      normalrank: [],
      showspinner: false
    };
  },
  methods: {
    get_ranklist() {
      let { ranklist } = this.api;
      // 获取推荐歌单
      this.getsource(ranklist).then(res => {
        console.log("排行榜", res.data);
        this.allrank = res.data.list;
        // this.allrank = [];
        res.data.list.forEach((item, index) => {
          if (item.tracks.length == 0) {
            this.normalrank.push(item);
          } else {
            this.goodrank.push(item);
          }
        });
      });
    },
    gorankinfo(id) {
      this.$router.push({
        name: "rankinfo",
        params: {
          id
        }
      });
    }
  },
  created() {
    this.get_ranklist();
  },
  // better-scroll的函数
  mounted() {
    this.$nextTick(() => {
      //$refs绑定元素
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          //开启点击事件 默认为false
          click: true,
          mouseWheel: true,
          pullDownRefresh: {
            // 下拉距离超过30px触发pullingDown事件
            threshold: 30,
            // 回弹停留在距离顶部30px的位置
            stop: 30
          }
        });
        this.scroll.on("pullingDown", () => {
          console.log("处理下拉刷新操作");
          this.showspinner = true;
          this.get_ranklist();
          setTimeout(() => {
            console.log("刷新成功");
            // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
            this.scroll.finishPullDown();
            this.showspinner = "";
          }, 1500);
        });
        // console.log(this.scroll)
      } else if (!this.$refs.wrapper) {
        return;
      } else {
        this.scroll.refresh();
      }
    });
  },
  components: {
    zeroLoading,
    zeroHeader
  }
};
</script>

<style lang='scss'>
// css
.rank {
  width: 100%;
  .wrapper {
    position: absolute;
    top: 45px;
    bottom: 0px;
    width: 100%;
    overflow: hidden;
    // 推荐榜单  && 更多榜单
    .title {
      margin: 15px calc((100% - 84vw) / 6);
      font-size: 16px;
      text-align: left;
      font-weight: 550;
    }
    .goodlist {
      .good_item {
        display: flex;
        margin: 12px calc((100% - 84vw) / 6);
        .good_item_pic {
          width: 28vw;
          max-width: 200px;
          height: 28vw;
          max-height: 200px;
          border-radius: 6px;
          overflow: hidden;
          position: relative;
          .good_item_update {
            position: absolute;
            bottom: 5px;
            left: 5px;
            color: #fff;
            font-size: 10px;
            z-index: 5;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .good_item_rank {
          text-align: left;
          margin: 2vw;
          .good_item_song {
            font-size: 12px;
            line-height: 8vw;
            width: 60vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .normallist {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 28vw;
        margin: 5px calc((100% - 84vw) / 6);
        .item_pic {
          width: 28vw;
          max-width: 200px;
          height: 28vw;
          max-height: 200px;
          border-radius: 6px;
          overflow: hidden;
          position: relative;
          .item_update {
            position: absolute;
            bottom: 5px;
            left: 5px;
            color: #fff;
            font-size: 10px;
            z-index: 5;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .item_name {
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
